<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="部门名称">
        <el-input v-model="formInline.deptName" placeholder="部门名称"/>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
            v-model="formInline.status"
            clearable
            placeholder="部门名称"
        >
          <el-option v-for="itme in sys_normal_disable" :key="itme.label" :label="itme.label"
                     :value="itme.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
      </el-form-item>
    </el-form>


    <el-table
        :data="deptList"
        v-loading="loading"
        row-key="deptId"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dept:edit']">修改</el-button>
          <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['system:dept:add']">新增</el-button>
          <el-button v-if="scope.row.parentId != 0" link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dept:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>

import { listDept } from "@/api/system/dept";

const {proxy} = getCurrentInstance();

const {sys_normal_disable} = proxy.useDict("sys_normal_disable");

const formInline = ref({
  deptName: undefined,
  status: undefined
})

function onSubmit() {
  GetList()
}
const deptList = ref([])
const loading=ref(false)
function GetList(){
  loading.value=true
  listDept(formInline.value).then(response => {
    deptList.value=response.data
    loading.value=false
  });
}
GetList()

</script>

<style scoped>

</style>
